/* 初始化样式
------------------------------- */
:root {
  // button的颜色
  --hs-color-black: #000;
  --hs-color-white: #fff;
  --hs-color-primary: #409eff;
  --hs-color-warning: #eebe77;
  --hs-color-danger: #f89898;

  // 菜单颜色
  --hs-color-lightblue: #d0e2eb;
  --hs-color-blue: #5c9cd8;

  --hs-border-color: #f1f2f3;
  --hs-color-gray: #45484b;

  --hs-color-hover-lightblue: #eaf0f3;
  --hs-color-hover: #f0f2f5;
  --hs-color-hover-rgba: rgb(237, 239, 241);

  // 左侧菜单
  --hs-bg-menuMainColor: var(--hs-color-white) !important;
  --hs-bg-menuActiveColor: var(--hs-color-lightblue) !important;
  --hs-bg-menuHoverColor: var(--hs-color-hover) !important;

  --hs-text-menuMainColor: var(--hs-color-black) !important;
  --hs-text-menuActiveColor: var(--hs-color-blue) !important;
  --hs-text-menuHoverColor: var(--hs-color-primary) !important;

  // 头部导航
  --hs-bg-headerBarColor: var(--hs-color-white) !important;

  // 头部右侧图标光标浮动
  --hs-color-user-hover: var(--hs-color-hover-rgba) !important;

  // 边框
  --hs-border-color-light: var(--hs-border-color) !important;

}

* {
  margin: 0;
  padding: 0;
  // padding 和 border 的值算在指定宽高内部的
  box-sizing: border-box;
  // 如 Dropdown 下拉菜单，隐藏点击会出现蓝色边框 */
  outline: none !important;
}

html,
body,
#app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-size: 13px;
}

.w100 {
  width: 100% !important;
}

.h100 {
  height: 100% !important;
}

.pointer {
  cursor: pointer;
}

/* flex 弹性布局
------------------------------- */
.flex {
  display: flex;
}

.flex-column {
  @extend .flex;
  flex-direction: column;
}

.flex-center {
  @extend .flex;
  align-items: center;
  justify-content: center;
}

.flex-row-center {
  display: flex;
  justify-content: center;
}

.flex-column-center {
  @extend .flex-column;
  align-items: center;
  justify-content: center;
}

.space-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.space-between-column {
  @extend .flex-column;
  justify-content: space-between;
}


/* 宽度全局样式
------------------------------- */
@for $i from 101 through 500 {
  .w#{$i} {
    width: #{$i}px !important;
  }
}

/* 高度全局样式
------------------------------- */
@for $i from 101 through 500 {
  .h#{$i} {
    height: #{$i}px !important;
  }
}

/* 外边距、内边距全局样式
------------------------------- */
@for $i from 1 through 35 {
  .mt#{$i} {
    margin-top: #{$i}px !important;
  }

  .mr#{$i} {
    margin-right: #{$i}px !important;
  }

  .mb#{$i} {
    margin-bottom: #{$i}px !important;
  }

  .ml#{$i} {
    margin-left: #{$i}px !important;
  }

  .mg#{$i} {
    margin: #{$i}px !important;
  }

  .pt#{$i} {
    padding-top: #{$i}px !important;
  }

  .pr#{$i} {
    padding-right: #{$i}px !important;
  }

  .pb#{$i} {
    padding-bottom: #{$i}px !important;
  }

  .pl#{$i} {
    padding-left: #{$i}px !important;
  }

  .pd#{$i} {
    padding: #{$i}px !important;
  }
}


/* 主布局样式
------------------------------- */
.layout-padding {
  border: 1px solid var(--hs-border-color-light);
  border-radius: 10px;
  overflow: hidden;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.layout-container {
  width: 100%;
  height: 100%;

  // 菜单展开时
  .layout-aside-menu-250 {
    width: 250px !important;
    transition: width .5s ease;
  }

  // 菜单收起时
  .layout-aside-menu-60 {
    width: 60px !important;
    transition: width .3s ease;
  }

  // 左侧菜单
  .layout-aside {
    background-color: var(--hs-bg-menuMainColor);
    height: inherit;
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden !important;
    border-right: 1px solid var(--hs-border-color-light);

    .layout-logo {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--hs-color-gray);
      border-bottom: 1px solid var(--hs-border-color-light);
      font-size: 15px;
      cursor: pointer;

      .layout-logo-img {
        width: 30px;
      }

      span {
        display: inline-block;
        white-space: nowrap;
        margin-left: 10px;
      }
    }
  }

  // 右侧头部
  .layout-header {
    padding: 0 !important;
    height: auto !important;

    .layout-header-index {
      height: 47px;
      display: flex;
      align-items: center;
      color: var(--el-text-color-regular) !important;
      background-color: var(--hs-bg-headerBarColor);
      border-bottom: 1px solid var(--hs-border-color-light) !important;

      .layout-header-breadcrumb {
        display: flex;
        align-items: center;
        flex: 1;
        height: inherit;

        .el-breadcrumb__inner a {
          // 面包屑标题不加粗
          font-weight: normal;
        }

        .layout-header-expand-icon {
          font-size: 16px;
          margin: 0 10px;
          color: #7c7d80;
          cursor: pointer;
          font-weight: 10;
        }
      }

      .layout-header-user {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 15px;

        .user-dropdown-link {
          height: inherit;
          display: flex;
          align-items: center;
          white-space: nowrap;
        }

        .layout-header-user-icon {
          cursor: pointer;
          padding: 0 10px;
          height: 50px;
          line-height: 50px;
          display: flex;
          align-items: center;

          &:hover {
            background: var(--hs-color-user-hover);
          }
        }
      }
    }
  }

  // TODO:右侧主区域
  .layout-main {
    padding: 0 !important;
    // overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .layout-main-warp {
      width: 98%;
      height: calc(100% - 10px);
      margin: 10PX auto;
      // border-radius: 10px;
      // border: 1px solid #e8eaec;
      // box-shadow: #b8b7b762 0 2px 8px;
    }
  }
}

/* NavMenu 导航菜单
------------------------------- */
.el-menu {
  border-right: none !important;

  .aside-title {
    color: #686a6b;
    font-size: 13px;
  }

  /** 全局图标的样式,针对element-plus */
  .icons {
    margin-right: 10px;
    color: #686a6b;
  }

  /** 全局图标的样式,针对自定义svg */
  .svg-icon {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    color: #686a6b;
  }

  &.el-menu--collapse {
    // 展开菜单时平滑
    transition: width 0.3ms ease;
  }

  .el-menu-item.is-active {
    color: var(--hs-color-blue);
    background-color: var(--hs-bg-menuActiveColor);

    .icons {
      color: var(--hs-text-menuActiveColor);
    }

    .aside-title {
      color: var(--hs-text-menuActiveColor);
    }

    &::before {
      border-left: 4px solid var(--hs-color-blue);
    }
  }

  .el-menu-item:hover,
  .el-sub-menu__title:hover {
    // color: var(--hs-text-menuHoverColor);
    background-color: var(--hs-bg-menuHoverColor);
  }

  // 收缩后，鼠标放在多级菜单浮出窗口
  .el-menu--vertical {
    background: var(--hs-bg-menuMainColor);
  }
}

// 收缩后，一级菜单浮出窗口 el-popper
.el-popper.is-dark {
  background: #e2e4e7 !important;
  border: 1px solid #acadb1 !important;
  color: #3e3c3c !important;

  .el-popper__arrow:before {
    background: #e2e4e7 !important;
    border: 1px solid #acadb1 !important;
  }
}

/** 无侧栏树的页面整体样式*/
.page-nav {
  width: 97%;
  height: 100%;
  margin: 0 auto;
  margin-top: 10px;
  font-size: 13px;


  .tab-header {
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
    border: 1px solid #e2e2e4;
    // box-shadow: #b8b7b762 0 2px 8px;
    border-radius: 5px;
    align-items: center;
    margin-bottom: 10px;

    .tab-header-search {
      margin-left: 5px;
      padding: 10px 0px;
    }

    .tab-header-btn {
      margin-right: 20px;
    }
  }

  .tab-container {
    width: 100%;
    height: calc(100% - 94px);

    .table-con {
      height: 100%;
      overflow: auto;
    }
  }

  .tab-page-container {
    width: 100%;
    height: calc(100% - 94px - 15px);

    .table-con {
      height: 100%;
      overflow: auto;
    }
  }
}

/** 无侧栏树的页面整体样式*/
.page-aside-nav {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  margin-top: 10px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;

  .tab-aside {
    width: 19%;
    height: 100%;
    border: 1px solid #e2e2e4;
    border-radius: 5px;
    box-shadow: #b8b7b762 0 2px 8px;

    &-header {
      height: 35px;
      font-size: 15px;
      border: 1px solid var(--hs-border-color);
      background-color: #f1f1f1;
      color: #686a6b;
      text-align: center;
      line-height: 35px;
    }

    &-search {
      width: 95%;
      margin: 10px auto;
    }

    .filter-tree {
      font-size: 13px;
      color: #686a6b;

      .custom-tree-node {
        display: flex;
        align-items: center;

        .svg-icon {
          margin-right: 6px;
        }
      }
    }
  }

  .tab-container {
    width: 80%;
    height: 100%;
    border: 1px solid #e2e2e4;
    border-radius: 5px;
    box-shadow: #b8b7b762 0 2px 8px;


    &-header {
      display: flex;
      width: 98%;
      margin: 0 auto;
      margin-top: 10px;
      justify-content: space-between;
      border: 1px solid #e2e2e4;
      border-radius: 5px;
      box-shadow: #b8b7b762 0 2px 8px;
      align-items: center;
      margin-bottom: 10px;

      &-search {
        margin-left: 5px;
        padding: 10px 0px;
      }

      &-btn {
        margin-right: 20px;
      }

      &-echart {
        width: 15%;
        margin-right: 50px;

        display: flex;
        justify-content: space-around;

        .header-echart {
          width: 60px;
          height: 52px;
          text-align: center;
          line-height: 60px;
        }

        .header-echart:hover {
          background-color: #d4dae0;
          cursor: pointer;
        }
      }
    }

    &-table {
      width: 98%;
      margin: 0 auto;
      height: calc(100% - 94px - 35px);


      .table-con {
        height: 100%;
        overflow: auto;

        &-childtab {
          width: 96%;
          margin: 0 auto;
        }
      }
    }

    &-echart {
      width: 98%;
      margin: 0 auto;
      height: calc(100% - 80px);
      // border: 1px solid #e2e2e4;
      // border-radius: 5px;
      // box-shadow: #b8b7b762 0 2px 8px;
    }
  }
}

/** 弹框底部样式 */
.dialog-footer {
  text-align: center;

  .el-button {
    width: 100px;
    margin-left: 30px;
  }
}

/** 抽屉表格 */
.drawer__footer {
  text-align: center;

  .el-button {
    width: 100px;
    margin-left: 30px;
  }
}